<template>
  <ModalVue v-show="show">
    <div
      class="create-website flex flex-col h-100 justify-between linear-gradient"
    >
      <div class="head core-head p-8">
        <div>新建一项</div>
        <div class="icon-button" @click="show = false">
          <img :src="closePng" width="16" />
        </div>
      </div>

      <div class="container flex-1 flex flex-s flex-col">
        <div class="input-container flex flex-s">
          <input
            v-model="newConfig.link"
            v-focus
            v-selected
            type="text"
            placeholder="请输入网址"
            @keydown.enter="create"
          />
        </div>
        <div class="text-center">
          <button
            v-if="!newConfig.id"
            class="create core-button"
            :disabled="loading"
            @click="create"
          >
            创建
          </button>
          <button
            v-else
            class="create core-button"
            :disabled="loading"
            @click="update"
          >
            更新
          </button>
        </div>
      </div>

      <div class="config">
        <ul class="flex flex-col gr-4">
          <li class="relative">
            <div>
              <span v-if="autoComplete.autoGetTitle" class="text-666">
                自动获取
              </span>
              <span v-else style="color: var(--pink)">手动填写</span>
              标题
            </div>
            <div>
              <input
                v-model="newConfig.title"
                placeholder="请输入标题"
                type="text"
                :disabled="autoComplete.autoGetTitle"
                class="mr-4 title"
              />
              <input v-model="autoComplete.autoGetTitle" type="checkbox" />
            </div>
          </li>
          <li>
            <div>自动获取图标</div>
            <div>
              <input
                v-model="autoComplete.autoGetIcon"
                type="checkbox"
                :disabled="true"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </ModalVue>
</template>

<script setup lang="ts">
  import closePng from '@/assets/images/close.png';
  import { currentFolder } from '@/views/bus';
  import { nanoid } from 'nanoid';
  import { ref } from 'vue';
  import axios from 'axios';
  import { extractDomainKeyword, isURL, matchIPUrl } from '@/utils/reg';
  import {
    newConfig,
    removeQueryString,
    resetConfig,
    show,
    autoComplete,
  } from './bus';
  import ModalVue from '../modal/Modal.vue';
  import { message } from '../message/bus';

  const loading = ref(false);

  /* 创建一个新的网址 */
  const create = async () => {
    if (!newConfig.value.link) {
      return;
    }
    newConfig.value.link = removeQueryString(newConfig.value.link);
    if (!newConfig.value.link) return;
    if (!newConfig.value.link.includes('.')) {
      newConfig.value.link += '.com';
    }
    if (!newConfig.value.link.startsWith('http')) {
      newConfig.value.link = newConfig.value.link.replace('www.', '');
      newConfig.value.link = `http://www.${newConfig.value.link}`;
    }

    const { link } = newConfig.value;
    if (!link) return;
    if (!isURL(link) && matchIPUrl(link)) {
      message('不是正确网址');
      return;
    }

    /* 当不需要自动获取标题 */
    if (autoComplete.value.autoGetTitle) {
      /* 使用接口加载信息 */
      loading.value = true;
      message('正在获取相关信息,请稍后');
      try {
        const { data } = await axios.get(
          `https://v2.api-m.com/api/title?url=${newConfig.value.link}`,
          {
            timeout: 5000,
          }
        );
        if (data.code === 200) {
          newConfig.value.title =
            data.data.replace(' ', '') ||
            extractDomainKeyword(newConfig.value.link);
          message('添加完成');
        } else {
          newConfig.value.title = '无标题';
          message('获取失败');
        }
        loading.value = false;
      } catch (error) {
        message('获取失败,系统超时');
        newConfig.value.title =
          extractDomainKeyword(newConfig.value.link) || '无标题';
        loading.value = false;
      }
    }
    if (currentFolder.value.children) {
      newConfig.value.id = nanoid();
      newConfig.value.sort = currentFolder.value.children.length;
      currentFolder.value.children.push({ ...newConfig.value });
      resetConfig();
    }
    show.value = false;
  };

  const update = () => {
    show.value = false;
    resetConfig();
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
